<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Mr. Zhang's Blog</title>
    <link href="g.css" rel="stylesheet"/>
    <script>
    function $(id){
    return document.getElementById(id);
    }
    <!--跳转-->
    function jump_one(){
    window.location.href="z.html";
    }
    </script>
</head>
<body>
<!--顶部-->
<div id="top">
    <!--标题-->
    <div class="title">Welcome to the mood!</div>
    <!--导航栏-->
    <div class="whole">
        <li class="father"><a href="#" onclick="jump_one();">主页</a></li>
        <li class="father"><a href="#">动态</a>
            <ul class="son">
                <li>family</li>
                <li>friend</li>
                <li>student</li>
            </ul>
        </li>
        <li class="father"><a href="#">消息</a>
            <ul class="son">
                <li>family</li>
                <li>friend</li>
                <li>student</li>
            </ul>
        </li>
        <li class="father"><a href="#">足迹</a></li>
        <li class="father"><a href="#" onclick="jump_two();">留言</a></li>
    </div>
</div>
<!--中间-->
<div class="flex_container">
    <div class="box1">
        <img src="image/2头像.jpg"
             style="width:80px;height:80px;border-radius:50px;position: relative;left:60px;top:-10px;"/>
        <div id="message">
            <h2>举歌栗子</h2>
            <br/>
            <p>| 暂无 原创 | 暂无 排名 | 0粉丝 | 0铁粉 |</p>
            <p>IP 属地: 四川</p>
            <p>加入时间: 2022/9/13</p>
        </div>
        <div>
            <img src="image/3编辑.jpg" style="width:20px;height:20px;position: relative;left:1000px;top:-110px;"/>
            <img src="image/4设置.jpg" style="width:20px;height:20px;position: relative;left:1020px;top:-110px;"/>
        </div>
        <div class="box2">
            <div style="line-height:25px;margin-left:20px;padding-top:20px;">
                <h3>详细信息</h3>
                <p>姓名:佚名</p>
                <p>班级:2022班</p>
                <p>学号:20*********</p>
                <p>联系方式:123***78910</p>
                <p>爱好:sing, dance, rap and basketball</p>
                <br/>
                <h3>心情仓库</h3>
                <img src="image/5心情.jpg" style="width:260px;height:340px;"/>
            </div>
        </div>
    </div>
    <div class="box3"><h3 style="font-size:20px;font-family:微软雅黑;text-align:center;padding-top:10px">Today</h3>
        <div>
            <ul style="display:inline;margin-left:100px;position: relative;top:50px;">
                <li style="display:inline-block;width:5%;color:#000000;">年</li>
                <li style="display:inline-block;width:5%;color:#000000;">月</li>
                <li style="display:inline-block;width:23%;color:#000000;">日</li>
                <li style="display:inline-block;width:25%;color:#000000;">星期</li>
                <li style="display:inline-block;width:10%;color:#000000;">天气 :</li>
            </ul>
            <p style="position: relative;top:70px;left:20px">写下你的感想 . . .</p>
        </div>
        <hr style="margin-top:35px"/>
        <hr style="margin-top:35px"/>
        <hr style="margin-top:35px"/>
        <hr style="margin-top:35px"/>
        <hr style="margin-top:35px"/>
        <hr style="margin-top:35px"/>
        <hr style="margin-top:35px"/>
        <hr style="margin-top:35px"/>
        <hr style="margin-top:35px"/>
        <hr style="margin-top:35px"/>
    </div>
</div>
<div id="bottom"><audio src="image/米良三由屋 - Valder Fields (伴奏).mp3" controls="controls" autoplay="autoplay">听首歌吧</audio></div>

</body>
</html>